<template>
  <div class="profile-container">
    <aside class="sidebar">
      <ul>
        <!-- 新增首页选项 -->
        <li @click="goToHome">首页</li>
        <li @click="currentComponent = 'EditProfile'">修改个人信息</li>
        <li @click="currentComponent = 'AddAuthor'">添加作者</li>
        <li @click="currentComponent = 'AddWork'">添加作品</li>
        <li @click="currentComponent = 'WorksList'">添加章节</li>
      </ul>
    </aside>
    <main class="content">
      <component :is="currentComponent"></component>
    </main>
  </div>
</template>

<script>
import EditProfile from '@/components/EditProfile.vue'; // 引入 EditProfile 组件
import AddAuthor from '@/components/AddAuthor.vue';
import AddWork from '@/components/AddWork.vue';
import WorksList from '@/components/WorksList.vue';

export default {
  name: 'Profile',
  components: {
    EditProfile, // 注册 EditProfile 组件
    AddAuthor,
    AddWork,
    WorksList,
  },
  data() {
    return {
      currentComponent: 'EditProfile' // 默认显示修改个人信息页面
    };
  },
  methods: {
    // 新增跳转到首页的方法
    goToHome() {
      this.$router.push({ name: 'home' });
    },
  }
};
</script>

<style scoped>
.profile-container {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 200px;
  background-color: #f0f0f0; /* 调整背景颜色 */
  padding: 20px;
  border-right: 1px solid #ddd; /* 添加右侧边框 */
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
}

.sidebar li {
  margin-bottom: 10px;
  cursor: pointer; /* 添加鼠标悬停效果 */
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.sidebar li:hover {
  background-color: #ddd; /* 鼠标悬停时背景变色 */
}

.sidebar a {
  text-decoration: none;
  color: #333;
  display: block;
  padding: 10px;
  border-radius: 4px;
}

.sidebar a:hover {
  background-color: #ddd;
}

.content {
  flex: 1;
  padding: 20px;
}
</style>